import React from 'react';
import { Card, Steps, Timeline, Tag, Breadcrumb } from 'antd';
import { ClockCircleOutlined, CheckCircleFilled, HomeOutlined } from '@ant-design/icons';
import type { StepsProps } from 'antd';
import { Link } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Process.module.less';

const { Step } = Steps;

interface ProcessStep {
  title: string;
  status: StepsProps['status'];
  description: string;
  time?: string;
}

const Process: React.FC = () => {
  const processSteps: ProcessStep[] = [
    {
      title: '资料准备',
      status: 'finish',
      description: '完成档案资料整理和准备',
      time: '2024-03-10'
    },
    {
      title: '现场验收',
      status: 'process',
      description: '验收专家现场检查',
      time: '2024-03-15'
    },
    {
      title: '问题反馈',
      status: 'wait',
      description: '验收问题反馈及整改'
    },
    {
      title: '验收完成',
      status: 'wait',
      description: '预验收工作完成'
    }
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '档案预验收',
          },
          {
            title: '验收过程',
          }
        ]} />
      </div>

      <Card title="验收过程" className={styles.processCard}>
        <Steps
          current={1}
          className={styles.steps}
          items={processSteps.map(step => ({
            title: step.title,
            description: step.description,
            status: step.status
          }))}
        />

        <div className={styles.timeline}>
          <Timeline
            items={[
              {
                color: 'green',
                dot: <CheckCircleFilled />,
                children: (
                  <div className={styles.timelineItem}>
                    <div className={styles.timelineHeader}>
                      <span>资料准备完成</span>
                      <Tag color="success">已完成</Tag>
                    </div>
                    <p>完成档案资料的整理和准备工作</p>
                    <span className={styles.time}>2024-03-10 14:30</span>
                  </div>
                ),
              },
              {
                color: 'blue',
                dot: <ClockCircleOutlined />,
                children: (
                  <div className={styles.timelineItem}>
                    <div className={styles.timelineHeader}>
                      <span>现场验收进行中</span>
                      <Tag color="processing">进行中</Tag>
                    </div>
                    <p>验收专家正在进行现场检查</p>
                    <span className={styles.time}>2024-03-15 09:30</span>
                  </div>
                ),
              }
            ]}
          />
        </div>
      </Card>
    </MainLayout>
  );
};

export default Process; 